<template>
    <div class="head-wrap">
        <div>
            <img src="../../assets/images/foot-log.png" alt="">
        </div>
        <ul class="nav-box">
            <li v-for="(v, i) in navList" :key="i"><a href="#">{{ v }} <span class="jm" v-show="i == 0"></span></a> <i
                    class="bi bi-caret-down-fill icon-turn" v-if="i == 3 || i == 4"></i>
                <div class="society-liability" v-if="i == 3">
                    <div class="t-top d-flex">
                        <div>
                            <h3 class="nav-title">个体</h3>
                            <a>便利用户生活</a>
                            <a>骑手关怀与发展</a>
                            <a>涌现新职业</a>
                        </div>
                        <div>
                            <h3 class="nav-title">产业</h3>
                            <a>助力市场繁荣</a>
                            <a>支持小商户发展</a>
                            <a>中华老字号服务包</a>
                        </div>
                        <div>
                            <h3 class="nav-title">社会</h3>
                            <a>推动绿色消费</a>
                            <a>支持乡村振兴</a>
                            <a>参与应急救灾</a>
                        </div>
                    </div>
                    <div class="b-box">下载中心</div>
                </div>
                <div class="public-spirited" v-if="i == 4">
                    <div>美团乡村儿童操场</div>
                    <div>美团公益基金会 <i class="bi bi-arrow-up-right"></i></div>
                </div>
            </li>

        </ul>
        <div class="d-flex rig-box">
            <div>
                下载和关注 <i class="bi bi-caret-down-fill"></i>
                <div class="mt-correlation">
                    <div class="mt-item"><img src="../../assets/images/mt.png" alt="美团App">美团App</div>
                    <div class="mt-item"><img src="../../assets//images//mt1.png" alt="美团外卖App">美团外卖App</div>
                    <div class="mt-item"><img src="../../assets//images//dz.png" alt="大众点评App">大众点评App</div>
                    <div class="mt-item"><img src="../../assets/images//wb.png" alt="美团微博">美团微博</div>
                    <div class="mt-item"><img src="../../assets/images/wx.png" alt="美团微信公众号">美团微信公众号</div>
                    <div class="mt-item"><img src="../../assets/images/sph.png" alt="美团微信视频号">美团微信视频号</div>
                </div>
            </div>
            <div>
                简体中文 <i class="bi bi-caret-down-fill"></i>
                <div class="language">
                    <div class="mt-item">简体中文 <i class="bi bi-check2"></i></div>
                    <div class="mt-item">繁體中文</div>
                    <div class="mt-item">English Version <i class="bi bi-arrow-up-right"></i></div>
                </div>
            </div>


        </div>
    </div>
    <div class="m-head-wrap">
        <i class="bi bi-list"></i>
        <img src="../../assets/images/foot-log.png" alt="">
        <!-- <div class="left-drawer">
            <div>
                <div>
                    <img src="../../assets/images/foot-log.png" alt="">
                </div>
                <ul>
                    <li>首页</li>
                    <li>和美团合作</li>
                    <li>我们的科技</li>
                    <li>企业社会责任</li>
                    <li>美团公益</li>
                    <li>投资者关系</li>
                    <li>加入我们</li>
                </ul>
                <div>
                    <div>下载和关注</div>
                    <div>
                        <img :src="v.imgUrl" alt="" v-for="v in imgList" :key="v.id">
                    </div>
                </div>

                <div>
                    <div>简体中文 / 繁體中文</div>
                    <div >English Version <i class="bi bi-arrow-up-right"></i></div>
                </div>
            </div>
        </div> -->
    </div>
    <div class="shadow"></div>
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue';
import imgUrl1 from '../../assets/images/mt.png';
import imgUrl2 from '../../assets/images/mt1.png';
import imgUrl3 from '../../assets/images/dz.png';
import imgUrl4 from '../../assets/images/wb.png';
import imgUrl5 from '../../assets/images/wx.png';
import imgUrl6 from '../../assets/images/sph.png';
export default defineComponent({
    name: 'Header',
    setup() {
        let navList = ref(['首页', '和美团合作', '我们的科技', '企业社会责任', '美团公益', '投资者关系', '加入我们']);
        const imgList = ref([
            {
                id: 1,
                imgUrl: imgUrl1,
            },
            {
                id: 2,
                imgUrl: imgUrl2,
            },
            {
                id: 3,
                imgUrl: imgUrl3,
            },
            {
                id: 4,
                imgUrl: imgUrl4,
            },
            {
                id: 5,
                imgUrl: imgUrl5,
            },
            {
                id: 6,
                imgUrl: imgUrl6,
            },
        ]);
        return {
            navList, imgList
        }

    }
});
</script>
<style scoped lang="scss">
.active {
    // color: var(--bgcolor);
    border-bottom: 5px solid var(--bgcolor);

}

.head-wrap {
    display: flex;
    justify-content: space-between;
    padding: 8px 40px;
    // background: radial-gradient(to right, #fffad9 50%, #fefdf2 50%);
    background: radial-gradient(circle, #fffad9, #fefdf2);
    align-items: center;
    gap: 15px 0;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    font-size: 16px;

    .nav-box {
        display: flex;
        justify-content: space-between;
        position: relative;

        li {
            position: relative;
            padding: 20px 32px;

            a {
                position: relative;

                // padding: 5px 0;
                .jm {
                    position: absolute;
                    top: 30px;
                    left: 50%;
                    width: 30px;
                    transform: translateX(-50%);
                    height: 4px;
                    border-radius: 10%;
                    background-color: var(--bgcolor);
                    transition: width 2s;
                    -webkit-transition: width 2s;
                    /* Safari */
                }

                &:hover .jm {
                    display: block !important;
                }



            }

            &:hover .society-liability {
                display: block !important;
            }

            &:hover .public-spirited {
                display: block !important;

            }
        }

        .society-liability {
            display: none;
            position: absolute;
            top: 75px;
            left: 0;
            background-color: #fff;
            width: 550px;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 1px -1px 0px 0px #eee;

            .nav-title {
                padding: 10px 20px;
                border-bottom: 1px solid #eee;
            }

            .t-top {
                a {
                    display: block;
                    padding: 15px;

                    &:hover {
                        text-decoration: underline;
                    }
                }

            }

            .b-box {
                text-align: center;
                padding: 20px;
                border-top: 1px solid #eee;
            }
        }

        .public-spirited {
            display: none;
            position: absolute;
            top: 75px;
            left: 0;
            background-color: #fff;
            width: 160px;
            text-align: center;
            border-radius: 10px;
            padding: 5px;
            box-shadow: 1px -1px 0px 0px #eee;

            div {
                padding: 10px;

                &:hover {
                    background-color: #eee;
                    border-radius: 5px;
                }
            }
        }
    }

    .d-flex {
        div {
            padding: 20px;
            cursor: pointer;
        }
    }

    .rig-box {
        position: relative;

        div {
            &:hover .mt-correlation {
                display: block !important;
            }

            &:hover .language {
                display: block !important;
            }
        }


        .mt-correlation {
            display: none;
            position: absolute;
            top: 75px;
            left: 0;
            background-color: #fff;
            box-shadow: 1px -1px 5px 1px #eee;
            border-radius: 8px;

            .mt-item {
                display: flex;
                text-align: left;
                width: 150px;
                padding: 10px;

                img {
                    margin-right: 8px;
                }
            }

        }

        .language {
            display: none;
            position: absolute;
            top: 75px;
            right: 5px;
            background-color: #fff;
            box-shadow: 1px -1px 5px 1px #eee;
            border-radius: 8px;

            .mt-item {
                text-align: left;
                width: 140px;
                padding: 10px;
            }

            // border-radius: 8px;
        }
    }
}

.shadow {
    // position: fixed;


    &::before {
        content: '';
        box-shadow: 0px 0px 10px 2px #b5adad;
        position: fixed;
        // height: 8px;
        width: 100%;
    }

    &::after {
        content: '';
        // box-sizing: 0 0 10px 1px #eee;
        background: radial-gradient(circle, #fffad9, #fefdf2);
        position: absolute;
        width: 100%;
        height: 15px;
    }
}

//  移动设备 css
.m-head-wrap {
    display: flex;
    justify-content: center;
    padding: 13px 40px;
    // background: radial-gradient(to right, #fffad9 50%, #fefdf2 50%);
    background: radial-gradient(circle, #fffad9, #fefdf2);
    align-items: center;
    position: relative;
    z-index: 45;

    i {
        position: absolute;
        top: 50%;
        left: 40px;
        transform: translateY(-50%);
        font-size: 25px;
    }

    img {
        // width: 100%;
        height: 32px;
    }
    .left-drawer{
        position: absolute;
        top: 0;
        left: 0;
        // width: 100%;
    }
}




</style>